<template>
  <GiPageLayout margin collapsed>

    <a-row justify="space-between">
      <a-space wrap>
        <GiButton type="add" @click="onAdd"></GiButton>
        <GiButton type="delete" @click="onMulDelete"></GiButton>
      </a-space>
      <a-space wrap>
        <GiButton type="search" @click="search"></GiButton>
        <GiButton type="reset" @click="reset"></GiButton>
      </a-space>
    </a-row>

    <a-table class="gi_table" row-key="id" :loading="loading" :data="userList" :bordered="{ cell: true }"
      :scroll="{ x: '100%', y: '100%', minWidth: 1700 }" :pagination="pagination"
      :row-selection="{ type: 'checkbox', showCheckedAll: true }" :selected-keys="selectedKeys" @select="select"
      @select-all="selectAll">
      <template #columns>
        <a-table-column title="序号" :width="68" align="center">
          <template #cell="cell">{{ cell.rowIndex + 1 }}</template>
        </a-table-column>
        <a-table-column title="标签名" data-index="title" :width="120">
          <template #cell="{ record }">
            <a-tag  color="orangered">{{ record.title }}</a-tag>
          </template>
        </a-table-column>

        <a-table-column title="创建时间" data-index="createTime" :width="200"></a-table-column>
        <a-table-column title="操作" :width="120" align="center" :fixed="fixed">
          <template #cell="{ record }">
            <a-space>
              <GiButton type="edit" size="mini" :disabled="record.disabled" @click="onEdit(record)"></GiButton>
              <a-popconfirm type="warning" content="确定删除该标签吗?" @before-ok="onDelete(record)">
                <GiButton type="delete" size="mini" :disabled="record.disabled"></GiButton>
              </a-popconfirm>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <detail ref="detailRef" @success="reset"></detail>
  </GiPageLayout>
</template>

<script setup lang="ts">
import detail from './detail.vue'

import type * as T from '@/apis/system/user'
import { Message } from '@arco-design/web-vue'
import { fileTagPage, fileTagDelete } from '@/apis/file'
import { useTable } from '@/hooks'

defineOptions({ name: 'FileTag' })

const detailRef = ref()


const queryParams = reactive({ status: '', username: '' })

const {
  loading,
  tableData: userList,
  pagination,
  selectedKeys,
  search,
  select,
  selectAll,
  fixed,
  handleDelete
} = useTable((page) => fileTagPage({ ...page, ...queryParams }), { immediate: true })


const reset = () => {
  search()
}

const onAdd = () => {
  detailRef.value?.open()
}

const resetPass = (item: T.ListItem) => { 
}

const onEdit = (item: T.ListItem) => {
  detailRef.value?.open(item)
}

const onDelete = (item: T.ListItem) => {
  return handleDelete(() => fileTagDelete({ ids: [item.tagId] }), { showModal: false })
}

// 批量删除
const onMulDelete = () => {
  if (!selectedKeys.value.length) {
    return Message.warning('请选择标签！')
  }
  return handleDelete(() => fileTagDelete({ ids: selectedKeys.value as string[] }))
}


</script>

<style lang="scss" scoped></style>
